<style>
    /* 为了防止点击新增移动 */
    
    .categoryManage .option-div {
        /* border: 1px solid red; */
        height: 35px;
    }
    
    #toAdd {
        background-color: #2cb5ac;
        font-size: 12px;
        color: #fff;
        border: 1px solid #2cb5ac;
        border-radius: 3px;
    }
    
    .dialog {
        position: absolute;
        /* 绝对定位 */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 18px;
        display: none;
        /* 默认隐藏 */
    }
    
    .dialog-content {
        margin: 100px auto;
        width: 50%;
        /* height: 400px; */
        /* 有内容撑起 */
        background-color: #fff;
        border-radius: 10px;
        /* padding: 10px 20px; */
        padding-bottom: 10px;
    }
    
    .dialog-header {
        /* line-height: 30px; */
        overflow: hidden;
        /* 清除浮动 */
        background-color: #2cb5ac;
        padding: 10px 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #fff;
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .dialog-header .dialog-title {
        float: left;
    }
    
    .dialog-header .dialog-cancel {
        float: right;
    }
    
    .dialog-body {
        line-height: 40px;
    }
    
    .dialog-body .form-item {
        margin-bottom: 10px;
    }
    
    .dialog-body label {
        width: 80px;
        text-align: right;
        margin-right: 10px;
        display: inline-block;
        /* 行内元素设置宽高无效 */
    }
    
    .dialog-body input,
    .dialog-body textarea,
    .dialog-body select {
        width: calc(100% - 150px);
        font-size: 18px;
    }
    
    .dialog-body input,
    .dialog-body select {
        height: 30px;
    }
    
    .dialog-footer {
        text-align: right;
        /* margin-bottom: 10px; */
        padding-right: 10px;
    }
</style>
<div class="categoryManage">
    <div class="option-div">
        <button class="btn btn-success" id="toAdd">新增</button>
    </div>
    <div class="table-div">
        <table class="table striped">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>排序号</th>
                    <th>父栏目</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- 模态框 -->
    <div class="dialog">
        <div class="dialog-content">
            <div class="dialog-header">
                <div class="dialog-title">
                    新增栏目信息
                </div>
                <div class="dialog-cancel"><i class="fa fa-times"></i></div>
            </div>
            <div class="dialog-body">
                <div class="form-item">
                    <label for="">栏目名称</label>
                    <input type="text" name="name">
                </div>
                <div class="form-item">
                    <label for="">父栏目</label>
                    <select name="parentId" id=""> -->
<!-- 遍历生成 -->
 <option value="">请选择</option>
			</select>
                </div>
                <div class="form-item">
                    <label for="">序号</label>
                    <input type="text" name="no">
                </div>
                <div class="form-item">
                    <label for="">栏目介绍</label>
                    <textarea name="description" id="" cols="30" rows="4"></textarea>
                </div>
            </div>
            <div class="dialog-footer">
                <button class="btn btn-error">取消</button>
                <button class="btn btn-success">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    //数据模型  ——全局
    var categoryDataModel = {
        // 所有类别数据(栏目数据)
        categoryData: [],
        // 当前修改的对象
        currentCategory: {},
        // 模态框的标题
        dialogTitle: '新增分类信息',
    };

    //确定按钮保存或更新
    $('.dialog-footer button:last').click(() => {
        //获取表单控件数据，进行保存操作
        //新增 4
        let params = { //传递给后台
            id: categoryDataModel.currentCategory.id,
            name: $('[name=name]').val(), //表单控件的val值
            description: $('[name=description]').val(), //表单控件的val值
            no: $('[name=no]').val(), //表单控件的val值
            parentId: $('[name=parentId]').val() //表单控件的val值
        };
        // console.log(params, '--数据');
        myAjax.postForm(api.CATEGORY_SAVEORUPDATE, params).then((res) => {
            // console.log(res);   //保存成功
            // 局部刷新数据，关闭模态框
            findAll();
            $('.dialog').fadeOut();
        }).catch((err) => {
            // err在请求成功后台操作失败的时候是res。err在请求失败是err
            alert(err.message || '保存错误');
        })
    })

    //绑定事件——新增
    $('#toAdd').click(() => {
        //标题 内容  option  显示模态框
        // 设置currentCategory清空
        //新增置空，修改放对象
        categoryDataModel.currentCategory = {};
        categoryDataModel.dialogTitle = '新增分类信息';
        changeDialogTitle();
    });


    //模态框关闭
    $('.dialog-footer button:first').click(() => {
        $('.fa-times').trigger('click'); //模拟触发
    }); //取消按钮
    $('.fa-times').click(() => {
        $('.dialog').fadeOut(); //淡出
    }); //关闭

    //封装 处理模态框的标题 ，追加option  ,设置表单控件内容 ，显示模态框
    function changeDialogTitle() {
        $('.dialog-title').text(categoryDataModel.dialogTitle);
        //清空操作
        $('[name=parentId]').empty();
        $('[name=parentId]').append($(`<option value="">请选择</option>`)); //开单引号
        // 遍历option
        // 过滤一级栏目作为父栏目
        // (item)=>{return item.name} ====> 简写  item=>item.name
        let result = categoryDateModel.categoryDate.filter(item => !item.parentId);
        // console.log(result);
        result.forEach(item => {
            $('[name=parentId]').append($(`<option value="${item.id}">${item.name}</option>`));
        });
        $('[name=name]').val(categoryDateModel.currentCategory.name);
        $('[name=parentId]').val(categoryDateModel.currentCategory.parentId);
        $('[name=no]').val(categoryDateModel.currentCategory.no);
        $('[name=description]').val(categoryDateModel.currentCategory.description);
        //显示模态框
        $('.dialog').fadeIn();
    }
    // console.log(1); 

    // 获取全部类别信息
    findAll();

    function findAll() {
        // myAjax.get("/category/findAll",null).then((res)=>{
        myAjax.get("/category/findAll", null).then((res) => {
            console.log(api.CATEGORY_FINDALL);
            // 清空节点 tbody
            $('.categoryManage tbody').empty();
            //将数据设置到数据模型中
            // categoryDateModel.categoryDate=res.data;
            // console.log(res);
            let arr = res.data || [];
            if (arr.length > 0) {
                arr.forEach((item, index) => {
                    $('.categoryManage tbody').append($(`
			<tr>
			  <td>${index+1}</td>
			  <td>${item.name}</td>
			  <td>${item.no}</td>
			  <td>${item.parentId || '--'}</td>
			  <td>${item.description || '--'}</td>
			  <td>
				<i data-item='${JSON.stringify(item)}' class="fa fa-edit" title="编辑"></i>
				<i data-id='${item.id}' class="fa fa-trash-o" title="删除"></i>
			  </td>          
			</tr>
		  `));
                    //  ``  es6模板字符串 `回车${name}`
                })
            }
        })
    }

    //绑定事件——编辑  事件代理
    $('.categoryManage tbody').on('click', '.fa-edit', (e) => {
        // console.log(e.target);
        let category = $(e.target).attr('data-item');
        // category = JSON.parse(category);
        //存到数据模型中，点击修改模态框的确定的时候，需要id
        categoryDateModel.currentCategory = JSON.parse(category);
        // category代表的是要修改的数据
        // console.log(category);  //JSON字符串

        //标题  option 
        // 设置currentCategory清空
        categoryDataModel.dialogTitle = '修改分类信息';
        changeDialogTitle();
        //内容  
        // $('[name=name]').val(category.name);
        // $('[name=parentId]').val(category.parentId);
        // $('[name=no]').val(category.no);
        // $('[name=description]').val(category.description);
        //显示模态框
        // $('.dialog').fadeIn();
    });

    //绑定事件——删除
    $('.categoryManage tbody').on('click', '.fa-trash-o', (e) => {
        // console.log(e.target);
        let id = $(e.target).attr('data-id');
        // id代表的是要修改的数据
        // console.log(id);  
        if (confirm('是否确认删除?')) { //{id：id} ->简写{ id }
            myAjax.get(api.CATEGORY_DELETEBYID, {
                id
            }).then((res) => {
                alert('删除成功'); //右上角提示几秒后会消失
                findAll();
            }).catch((err) => {
                alert(err.message || "删除失败");
            })
        }
    });

    // 鼠标摁下移动与放开
    $('#toAdd').mousedown(() => {
        $('#toAdd').css({
            "margin-left": "2px",
            "margin-top": "2px"
        });
    })
    $('#toAdd').mouseup(() => {
        $('#toAdd').css({
            "margin-left": "0px",
            "margin-top": "0px"
        });
    })
</script>